<template>
  <div class="xzJgs">
    <div id="echartsXzJgs" />
  </div>
</template>

<script>
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    const self = this
    return {
      echartsXzJgs: null,
      seriesdata1: [
        { name: '行政机关', value: 50 },
        { name: '政法机关', value: 60 },
        { name: '事业单位', value: 80 }
      ],
      colorList: [
        '#407AFB',
        '#41CBAB',
        '#FFC653',
        '#EE3939',
        '#FFAFDA',
        '#00FFFF'
      ],
      option: {
        tooltip: { show: true },
        title: {
          text: '{b|合计：}',
          left: '60%',
          top: '10%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '20',
            color: '#FFFFFF',
            textAlign: 'center',
            rich: {
              a: {
                fontSize: '20',
                fontWeight: 'bold',
                backgroundColor: 'rgba(56,89,255,0.2)',
                borderColor: 'rgba(56,211,255,1)',
                borderWidth: 1,
                padding: [6, 6, 6, 6],
                shadowColor: 'rgba(56,211,255,1)',
                shadowBlur: 3,
                borderRadius: 3
              },
              b: {
                fontSize: '24',
                fontWeight: 'bold',
                padding: [6, 6, 6, 6],
                color: '#FFFFFF'
              }
            }
          }
        },
        legend: {
          show: true,
          // icon: 'circle',
          orient: 'vertical',
          top: '40%',
          left: '35%',
          itemGap: 15,
          itemWidth: 15,
          itemHeight: 10,
          data: '',
          formatter: function (name) {
            return (
              '{a|' +
              '    ' +
              name +
              '}{b|' +
              '  ' +
              self.array2obj(self.seriesdata1, 'name')[name].value.toFixed(0) +
              '}{c|' +
              Number(
                Math.floor(Math.random() * (20 - 10 + 1)) + 10
              ).toLocaleString() +
              '%}'
            )
          },
          textStyle: {
            rich: {
              a: {
                align: 'center',
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
                width: 20,
                // fontWeight: 600,
                padding: [0, 0, 0, 10]
              },
              b: {
                align: 'center',
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
                width: 5,
                // fontWeight: 600,
                padding: [0, 0, 0, 40]
              },
              c: {
                align: 'center',
                fontSize: 14,
                color: 'rgba(255,255,255,1)',
                width: 5,
                // fontWeight: 600,
                padding: [0, 0, 0, 50]
              }
            }
          }
        },
        series: {
          type: 'pie',
          center: ['18%', '50%'],
          radius: ['25%', '50%'],
          clockwise: true,
          // startAngle: 50,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function (params) {
                return self.colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: false,
            position: 'outside',
            formatter: function (data) {
              // console.log('data',data)
              return (
                '\n{icon|}\n' +
                '{name|' +
                data.name +
                '}' +
                ' {value|' +
                data.value.toFixed(0) +
                ' ,' +
                data.percent.toFixed(0) +
                '%}'
              )
            },
            // padding: [-40, -90, -20, -80],
            rich: {
              icon: {
                height: 5,
                width: 5,
                lineHeight: 5,
                // marginBottom: 10,
                padding: [0, -5],
                borderRadius: 5,
                backgroundColor: 't' // 圆点颜色和饼图块状颜色一致
              },
              name: {
                fontSize: 14,
                padding: [20, 100, -20, -90],
                color: '#ffffff'
              },
              value: {
                fontSize: 14,
                padding: [20, -90, -20, -100],
                color: '#ffffff'
              }
            }
          },
          labelLine: {
            show: false,
            normal: {
              length: 10,
              length2: 80,
              align: 'right',
              lineStyle: {
                width: 1
              }
            }
          },
          data: '',
          seriesIndex: 0
        }
      }
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.seriesdata1 = [
        {
          name: '行政机关',
          value: Math.floor(Math.random() * (100 - 50 + 1)) + 50
        },
        {
          name: '政法机关',
          value: Math.floor(Math.random() * (100 - 50 + 1)) + 50
        },
        {
          name: '事业单位',
          value: Math.floor(Math.random() * (100 - 50 + 1)) + 50
        }
      ]
      const h = Math.floor(Math.random() * (6500 - 3000 + 1)) + 3000 + ''
      const arr = h.split('')
      let m = ''
      for (let i = 0; i < arr.length; i++) {
        m += '{a|' + arr[i] + '}'
        if (i != arr.length - 1) {
          m += '  '
        }
      }
      this.echartsXzJgs.setOption({
        title: {
          text: '{b|行政机关：}' + m
        },
        legend: {
          data: this.seriesdata1
        },
        series: {
          data: this.seriesdata1
        }
      })
    }
  },
  mounted() {
    this.drawEcharts()
  },
  methods: {
    array2obj(array, key) {
      const resObj = {}
      for (let i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    },
    drawEcharts() {
      // 将合计值转换为数组
      const h = '6725'
      const arr = h.split('')
      let m = ''

      for (let i = 0; i < arr.length; i++) {
        m += '{a|' + arr[i] + '}'
        if (i != arr.length - 1) {
          m += '  '
        }
      }
      this.option.title.text = '{b|行政机关：}' + m
      this.option.legend.data = this.seriesdata1
      this.option.series.data = this.seriesdata1
      // 基于准备好的dom，初始化echarts实例
      this.echartsXzJgs = this.$echarts.init(
        document.getElementById('echartsXzJgs')
      )
      // 使用刚指定的配置项和数据显示图表。
      this.echartsXzJgs.clear()

      this.option && this.echartsXzJgs.setOption(this.option)
      // 响应式变化
      window.addEventListener('resize', () => this.echartsXzJgs.resize(), false)
    }
  }
}
</script>

<style lang='scss'>
.xzJgs {
  width: 100%;
  height: 35%;
  background-color: rgba(1, 35, 102, 0.8);

  #echartsXzJgs {
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: electronicFont;
    font-size: 30px;
  }
}
</style>
